<template>
  <div style="text-align: center;">
    <div>
      <div class="lable">
        <span class="name">地区：</span>
        <div v-for="area in areas" :key="area.index">
          <el-radio class="value" v-model="SearchArea" :label="area" @input="getArea()"></el-radio>
        </div>
      </div>
      <div class="lable">
        <span class="name">类型：</span>
        <div v-for="type in types" :key="type.index">
          <el-radio class="value" v-model="SearchType" :label="type" @input="getType()"></el-radio>
        </div>
      </div>
      <div class="lable">
        <span class="name">热度：</span>
        <div v-for="order in orders" :key="order.index">
          <el-radio class="value" v-model="SearchOrder" :label="order" @input="getOrder()"></el-radio>
        </div>
      </div>
    </div>

    <div style="margin-top:20px">
      <m-move-list :MvData="mvData"></m-move-list>
    </div>
  </div>
</template>

<script>
  import moveApi from "@/musicApi/apis/move";
  import moveList from "@/components/aplayer/moveList";
  export default {
    name: "mv",
    components: {
      "m-move-list": moveList
    },
    data() {
      return {
        // 全部,内地,港台,欧美,日本,韩国,
        areas: ["全部", "内地", "港台", "欧美", "日本", "韩国",],
        types: ["全部", "官方版", "原生", "现场版", "网易出品"],
        orders: ["上升最快", "最热", "最新"],
        SearchArea: '全部',
        SearchType: '全部',
        SearchOrder: '上升最快',
        mvData: []
      }
    },
    mounted() {
      moveApi.getAllMv(this.SearchArea, this.SearchType, this.SearchOrder, 32).then(res => {
        this.mvData = res.data.data;
      })
    },
    methods: {
      //地区
      getArea() {
        moveApi.getAllMv(this.SearchArea, this.SearchType, this.SearchOrder, 32).then(res => {
          this.mvData = res.data.data;
        })
      },
      //类型
      getType() {
        moveApi.getAllMv(this.SearchArea, this.SearchType, this.SearchOrder, 32).then(res => {
          this.mvData = res.data.data;
        })
      },
      //排序
      getOrder() {
        moveApi.getAllMv(this.SearchArea, this.SearchType, this.SearchOrder, 32).then(res => {
          this.mvData = res.data.data;
        })
      }
    }

  }
</script>

<style scoped>
  .lable {
    display: flex;
    margin-left: 650px;
    margin-top: 15px;
    color: #660000;
  }

  .name {
    float: left;
    font-size: 20px
  }

  .value {
    float: left;
    top: 8px;
    margin-left: 20px;
    color: #333333;
  }
</style>